<template>
  <div class="tab-nav">
    <nav-item
      v-for="(item,index) of navData"
      :key="item.id"
      :item="item"
      :item-len="navData.length"
      :tab-index="tabIndex"
      :index="index"
      @change-nav-item="changeNavItem"
    ></nav-item>
  </div>
</template>

<script>
import NavItem from './navItem.vue'

export default {
  name: 'tab-nav',
  components: {
    NavItem
  },
  props: ['navData', 'tabIndex'],
  methods: {
    changeNavItem(index) {
      this.$emit('changeNavItem', index);
    }
  }
}
</script>

<style>
.tab-nav {
  height: 50px;
  border-bottom: 1px solid #454545;
  box-sizing: border-box;
  line-height: 50px;
  text-align: center;
}
</style>
